<template>
  <div class="axiom-mobile-detail">
    <!-- 详情内容 -->
    <div class="detail-content">
      <AxiomCard>
        <el-form
          :model="data"
          :label-position="labelPosition"
          :label-width="labelWidth"
          class="detail-form"
        >
          <template v-for="(field, index) in processedFields" :key="field.key || index">
            <div
              :class="getFieldClass(field)"
            >
              <!-- 分组标题 -->
              <div v-if="field.type === 'group'" class="field-group">
                <AxiomDivider />
                <AxiomTitle 
                  :title="field.label"
                  type="section"
                  level="4"
                  class="group-title"
                />
                <slot
                  v-if="field.slot"
                  :name="field.slot"
                  :field="field"
                  :value="getFieldValue(field)"
                  :data="data"
                />
              </div>
              
              <!-- 普通字段 -->
              <el-form-item
                v-else
                :label="field.label"
                :class="getItemClass(field)"
              >
                <!-- 自定义插槽 -->
                <slot 
                  v-if="field.slot"
                  :name="field.slot"
                  :field="field"
                  :value="getFieldValue(field)"
                  :data="data"
                >
                  {{ getFieldValue(field) }}
                </slot>
                
                <!-- 默认显示 -->
                <div v-else class="field-value">
                  <!-- 标签类型 -->
                  <div v-if="field.displayType === 'tags'" class="field-tags">
                    <AxiomTag
                      v-for="tag in getTagsValue(field)"
                      :key="tag.value || tag"
                      :label="tag.label || tag"
                      :type="tag.type || getTagType(field, tag.value || tag)"
                      size="small"
                    />
                  </div>
                  
                  <!-- 状态类型 -->
                  <AxiomTag
                    v-else-if="field.displayType === 'status'"
                    :label="getDisplayValue(field)"
                    :type="getStatusType(field)"
                  />
                  
                  <!-- 链接类型 -->
                  <AxiomLink
                    v-else-if="field.displayType === 'link'"
                    :href="getFieldValue(field)"
                    :text="getDisplayValue(field)"
                  />
                  
                  <!-- 代码类型 -->
                  <AxiomCode
                    v-else-if="field.displayType === 'code'"
                    :code="getDisplayValue(field)"
                    :language="field.language || 'text'"
                  />
                  
                  <!-- 图片类型 -->
                  <img
                    v-else-if="field.displayType === 'image'"
                    :src="getFieldValue(field)"
                    :alt="field.label"
                    class="field-image"
                  />
                  
                  <!-- 普通文本 -->
                  <AxiomText
                    v-else
                    :type="getTextType(field)"
                    :weight="getTextWeight(field)"
                    :size="getTextSize(field)"
                    class="field-text"
                  >
                    {{ getDisplayValue(field) }}
                  </AxiomText>
                </div>
              </el-form-item>
            </div>
          </template>
        </el-form>
      </AxiomCard>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import AxiomCard from '../common/AxiomCard.vue';
import AxiomDivider from '../common/AxiomDivider.vue';
import AxiomTitle from '../common/AxiomTitle.vue';
import AxiomTag from '../common/AxiomTag.vue';
import AxiomLink from '../common/AxiomLink.vue';
import AxiomCode from '../common/AxiomCode.vue';
import AxiomText from '../common/AxiomText.vue';

export default {
  name: 'AxiomMobileDetail',
  components: {
    AxiomCard,
    AxiomDivider,
    AxiomTitle,
    AxiomTag,
    AxiomLink,
    AxiomCode,
    AxiomText
  },
  props: {
    data: { type: Object, required: true },
    fields: { type: Array, required: true },
    labelPosition: { type: String, default: 'top' },
    labelWidth: { type: String, default: 'auto' },
    defaultColumnSpan: { type: Number, default: 1 }
  },
  setup(props) {
    const processedFields = computed(() => props.fields.map(field => ({
      columnSpan: props.defaultColumnSpan,
      displayType: 'text',
      ...field
    })));

    const getFieldClass = (field) => `detail-field field-span-${field.columnSpan || props.defaultColumnSpan}`;
    const getItemClass = (field) => `item-type-${field.displayType || 'text'}`;

    const getFieldValue = (field) => {
      const fieldPath = field.field || field.key;
      return fieldPath.split('.').reduce((obj, key) => obj?.[key], props.data) ?? '';
    };

    const getDisplayValue = (field) => {
      let value = getFieldValue(field);
      if (field.translator && typeof field.translator === 'object' && field.translator[value] !== undefined) {
          value = field.translator[value];
      }
      if (field.formatter && typeof field.formatter === 'function') {
          value = field.formatter(value, props.data);
      }
      return value === null || value === undefined || value === '' ? '-' : value;
    };

    const getTagsValue = (field) => {
      const value = getFieldValue(field);
      if (!Array.isArray(value)) return [];
      return value.map(item => typeof item === 'object' && item !== null ? item : {
        value: item,
        label: (field.translator && field.translator[item]) || item,
        type: (field.tagTypeMap && field.tagTypeMap[item]) || 'default'
      });
    };
    
    const getTagType = (field, value) => (field.tagTypeMap && field.tagTypeMap[value]) || 'default';
    const getStatusType = (field) => {
        const value = getFieldValue(field);
        return (field.tagTypeMap && field.tagTypeMap[value]) || 'default';
    };

    const getTextType = (field) => 'default';
    const getTextWeight = (field) => 'normal';
    const getTextSize = (field) => 'medium';

    return {
      processedFields,
      getFieldClass,
      getItemClass,
      getFieldValue,
      getDisplayValue,
      getTagsValue,
      getTagType,
      getStatusType,
      getTextType,
      getTextWeight,
      getTextSize,
    };
  }
};
</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-mobile-detail';
</style> 